import React, { Component } from 'react';
import { Modal, Form, Input, Radio, Spin, message, Tree, Button } from 'antd';
import { getListnewArr } from 'utils/utils';

const FormItem = Form.Item;
const TreeNode = Tree.TreeNode;

@Form.create()
class RoleEditForm extends Component {
  constructor(props) {
    super(props);
    const { record } = props;
    this.state = {
      treeCheckedKeys: [],
      treeSubmitKeys: [],
      hasChanged: false,
    };
  }

  componentWillReceiveProps(nextProps) {
    const nextdata = nextProps.record;
    const data = this.props.record;
    if (nextdata) {
      this.setState({
        treeCheckedKeys: nextdata,
        treeSubmitKeys: nextdata,
      });
    }

    // will be true
    // const recordChanged = nextProps.record !== this.props.record;
    // const {treeCheckedKeys}=this.state;
    // if(recordChanged || treeCheckedKeys.length<=0){
    //   this.setState({
    //     treeCheckedKeys: nextProps.record
    //   });
    // }
  }
  /**
   * 返回表单数据到父组件
   */
  onOk = values => {
    if (values) {
      this.props.onOk(values);
    } else {
      message.error('请选择分配资源');
    }
  };
  /**
   * 清除表单数据
   */
  handleFormClear = () => {
    const { form } = this.props;
    this.setState({
      treeCheckedKeys: [],
    });
    form.resetFields();
  };

  onSelect = (selectedKeys, info) => {
    console.log('selected', selectedKeys, info);
  };

  onCheck = (checkedKeys, info) => {
    let checkedKey = [...checkedKeys, ...info.halfCheckedKeys];
    this.setState({
      hasChanged: true,
      treeCheckedKeys: checkedKeys,
      treeSubmitKeys: checkedKey,
    });
  };
  render() {
    const { visible, onCancel, loading = false, allDatas = [] } = this.props;
    let { treeCheckedKeys, treeSubmitKeys,hasChanged } = this.state;

    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 19 },
      },
    };
    const renderTreeNodes = (data, i) => {
      return data.map(item => {
        if (item.children) {
          return (
            <TreeNode title={item.title} key={item.key} dataRef={item}>
              {renderTreeNodes(item.children, item.key)}
            </TreeNode>
          );
        } else {
          return <TreeNode title={item.title} key={item.key} dataRef={item} />;
        }
      });
    };
    return (
      <span>
        <Modal
          visible={visible}
          title="分配资源"
          footer={null}
          confirmLoading={loading}
          onCancel={onCancel}
          afterClose={this.handleFormClear}
        >
          <Spin tip="数据加载中..." spinning={loading}>
            <Form
              layout="vertical"
              style={{
                maxHeight: '400px',
                overflowX: 'hidden',
                overflowY: 'auto',
              }}
            >
              <FormItem {...formItemLayout} label="资源" hasFeedback>
                <Tree
                  checkable={true}
                  showLine
                  onCheck={this.onCheck}
                  onSelect={this.onSelect}
                  checkedKeys={treeCheckedKeys}
                >
                  {renderTreeNodes(allDatas, 0)}
                </Tree>
              </FormItem>
              <FormItem>
                <Button disabled={!hasChanged} onClick={() => this.onOk(treeSubmitKeys)}  type="primary" style={{ float: 'right',marginTop:"10px" }}>确定</Button>
              </FormItem>
            </Form>
          </Spin>
        </Modal>
      </span>
    );
  }
}

export default RoleEditForm;
